<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>
        window.onload = function (){
            cutAll(1);
        }
        function cutAll(pageNo){
            axios.get("/role/cutAll",{
                params:{
                    pageNo,
                }
            }).then(e=>{
                var info = e.data;
                var str ="";
                for (var i=0;i<info.records.length;i++){
                    var obj = info.records[i];
                    str+=`<tr><td>${obj.name}</td><td>
<input type="button" onclick="del(${obj.id})" value="删除角色"> <input type="button" value="查看角色权限" onclick="findById(${obj.id})">
<a href="/role/update.html?id=${obj.id}">修改角色权限</a>
</td>`
                }
                $("roleData").innerHTML = str;
                var pageStr ="";
                for (var i=1;i<=info.pages;i++){
                    pageStr +=`<a href="javascript:cutAll(${i})">${i} </a>`
                }
                $("pageCutDiv").innerHTML=pageStr;
            });

        }

        function del(id){
            axios.get("/role/del",{
                params:{
                    id
                }
            }).then(e=>{
                if ("ok" == e.data){
                    location.href="/role/role.html"
                }
            })
        }

        function findById(id){
            axios.get("/role/findById",{
                params:{
                    id
                }
            }).then(e=>{
                var info = e.data;
                $("findById").style.display = "block";
                $("name").innerHTML =info.name;
                var str = "";
                for (var i=0;i<info.gradeBeanList.length;i++){
                    str += info.gradeBeanList[i].grade+",";
                }
                $("gradeList").innerHTML = str;
            })
        }

    </script>

</head>
<body>
<h2>角色管理</h2>
<table border="1" width="90%" cellspacing="0">
    <thead>
    <tr>
        <th>角色名称</th><th>操作</th>
    </tr>
    </thead>
    <tbody id="roleData">
    </tbody>
</table>

<div id="pageCutDiv">

</div>

<a style="margin: 0px auto" href="/role/add.html">添加新角色</a>


<div style="width: 600px;height: 400px;margin: 0 auto;display: none;background-color: yellow" id="findById">
    角色名称:<span id="name"></span><br>
    拥有权限:<div id="gradeList"></div>
    <input type="button" onclick="$('findById').style.display='none'" value="确定">
</div>



</body>
</html>